<template>
	<view>
		<view class="header">
			<view class="header_top">
				<icon class="icon icon-back" @tap="back" v-if="isback"></icon>
				<view class="header_top_search">
					<icon type="search" size="15"></icon>
					<input type="text" placeholder="请输入关键字" placeholder-style="font-size: 28upx" name="" id="">
				</view>
				<icon class="icon icon-cate1" @tap="goshop"></icon>
			</view>
			<view class="header_bottom">
				<text @click="relist(1)" :class="action==1?'active':''">综合推荐</text>
				<text @click="relist(2)" :class="action==2?'active':''">销量</text>
				<text @click="relist(3)" :class="action==3?'active':''">价格</text>
				<!-- <text @click="clearcate(4)" :class="action==4?'active':''" style="color:blue">{{catetitle}}</text> -->
			</view>
		</view>
		<view class="zhanwei"></view>
		<view class="goodsbox">
			<view class="goodsbox_item" v-for="(item,index) in goodsList" :key="index">
				<Good :good="item"></Good>
			</view>
		</view>
	</view>
</template>

<script>
	import Good from '@/components/Good/Good.vue'
	export default {
		data() {
			return {
				isback: false,
				nextp: 1,
				action: 1,
				cateid: 0,
				cateid2: 0,
				catetitle: '',
				goodsList: [{
						thumb: "/static/g1.jpeg",
						title: "盖朗德空气炸锅家用",
						price: "1185",
						oldprice: "1999.00",
						desc: "盖朗德空气炸锅家用4L大容量智能电炸锅 无油低脂煎炸 触控智能 多功能"
					},
					{
						thumb: "/static/g2.jpg",
						title: "京屋Q5顶配版按摩椅...",
						price: "12888",
						oldprice: "38800.00",
						desc: "京屋Q5顶配版按摩椅 全新升级24项技术 按摩椅中的爱马仕"
					},

				]
			};
		},
		onShow(options) {
			this.cateid = getApp().globalData.cateid;
			this.cateid2 = getApp().globalData.cateid2;
			this.catetitle = getApp().globalData.catetitle;
			this.getlist();

		},
		onReachBottom() {
			if (this.nextp) {
				this.getlist();
			}
		},
		methods: {
			goshop() {
				uni.navigateTo({

					url: "/pages/shop/index"
				})
			},
			relist(type) {
				this.action = type;
				this.nextp = 1;
				this.getlist();
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getlist() {
				uni.showLoading({
					title: '加载中...'
				})
				var that = this;
				that.$http('api/getgoodslist', {
					p: that.nextp,
					cateid: that.cateid,
					cateid2: that.cateid2,
					order: that.action
				}, function(res) {
					uni.hideLoading()
					var list = res.data.list;
					if (list) {
						if (that.nextp == 1) {
							// that.goodsList = list;
						} else {
							// for (var i = 0; i < list.length; i++) {
							// 	that.goodsList.push(list[i]);
							// }
						}
					}
					that.nextp = res.data.nextp;

				})
			},
			clearcate() {
				getApp().globalData.cateid = 0;
				getApp().globalData.cateid2 = 0;
				getApp().globalData.catetitle = '';
				this.cateid = 0;
				this.cateid2 = 0;
				this.catetitle = '';
				this.getlist()
			}
		},
		components: {
			Good
		}
	}
</script>

<style lang="scss">
	.active {
		color: cadetblue;
	}

	.header {
		width: 100%;
		background-color: #fff;
		position: fixed;
		height: 180upx;
		display: flex;
		flex-direction: column;
		z-index: 99;

		&_top {
			margin: 0 auto;
			width: 356px;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90upx;
			border-bottom: 1px solid #efefef;

			.icon-back {
				position: absolute;
				left: 0;
			}

			&_search {
				display: flex;
				align-items: center;
				width: 600upx;
				height: 60upx;
				background-color: rgb(242, 242, 242);
				box-sizing: border-box;
				padding: 0 20upx;
				border-radius: 100upx;

				input {
					flex: 1;
					box-sizing: border-box;
					padding: 0 16upx;
				}
			}
		}

		&_bottom {
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28upx;
			color: #333;
			font-weight: 600;
		}
	}

	.zhanwei {
		width: 100%;
		height: 180upx;
	}

	.goodsbox {
		width: 686upx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		&_item {
			margin-bottom: 20upx;
		}
	}
</style>
